<template>
	<view class="myActivity">
		<view class="actTab">
			<uni-tabchange :tabArr="tabArr" :activeTab="activeTab" @tabChangeSuccess="tabChangeSuccess"></uni-tabchange>
		</view>
		<view class="activityList flex justConBetween">
			<view class="leftBox">
				<template v-for="(item,index) in activityData">
					<view class="actOne" :key="index" v-if="index%2==0">
						<uni-activity :activityItem="item" :canDetail="from=='group'?false:true" :canConGroup="(from=='group' || activeTab!=0)?false:true" :key="index" @actComOper="actComOper"></uni-activity>
					</view>
				</template>
			</view>
			<view class="rightBox">
				<template v-for="(item,index) in activityData">
					<view class="actOne" :key="index" v-if="index%2!=0">
						<uni-activity :activityItem="item" :canDetail="from=='group'?false:true" :canConGroup="(from=='group' || activeTab!=0)?false:true" :key="index" @actComOper="actComOper"></uni-activity>
					</view>
				</template>
			</view>
		</view>
		<uni-nodata v-if="(activityData.length==0)"></uni-nodata>
		<view class="actFixedBtn" v-if="from=='group'">
			<checkbox-group @change="changeFree">
				<label>
					<checkbox :value="noFree" :checked="noFree==0?false:true" color="#FFCC33" style="transform:scale(0.7)" />按活动的收费模式进行收费
				</label>
			</checkbox-group>
			<view class="flex alignCenter justConBetween btns">
				<view class="noWidthBtn" @click="sureConnect">确定</view>
				<view class="noWidthBtn" @click="toAdd">+创建活动</view>
			</view>
		</view>
		<view class="fixedBottomBtn" v-if="!from" @click="toAdd">+创建活动</view>
	</view>
</template>

<script>
	import { myAct } from "@/api/mine.js"
	import { connectAct } from "@/api/send.js"
	export default {
		data() {
			return {
				activeTab:0,
				noFree:'0',
				tabArr:[{
					title:'自己的'
				},{
					title:'采购的'
				}],
				activityData:[],
				page:1,
				pageSize:10,
				pageTotal:0,
				from:'',
				groupId:'',
				chooseActs:[]
			};
		},
		onLoad(option) {
			if(option.from=='group'){
				this.from=option.from
				this.groupId=option.id
			}
		},
		onShow() {
			this.initPage()
			this.getList()
		},
		methods:{
			initPage(){
				this.page=1;
				this.activityData=[];
			},
			// 获取列表
			getList(){
				let param={
					page:this.page,
					size:this.pageSize,
					type:this.activeTab,
					teamId:this.groupId
				}
				myAct(param).then((res)=>{
					if(res.code==100000){
						// 若是从小组过来关联活动的，需要回显已关联的
						if(this.from=='group'){
							res.data.rows.forEach((item)=>{
								item.chooseStatus=item.isRelationTeam
							})
						}
						this.activityData=this.activityData.concat(res.data.rows)
						this.pageTotal=Math.ceil(res.data.total/this.pageSize)
					}
				}).catch((err)=>{})
			},
			// 切换tab事件
			tabChangeSuccess(e){
				console.log('e===',e)
				this.activeTab=e.activeTab
				this.initPage()
				this.getList()
			},
			// 确认是否需要设置收费
			changeFree(e){
				this.noFree=(this.noFree=='0'?'1':'0')
			},
			actComOper(obj){
				// 小组关联活动
				if(obj.type=='add'){
					this.chooseActs.push(obj.item)
				}else if(obj.type=='reduce'){
					this.chooseActs.forEach((val,index)=>{
						console.log('循环查找',val,index,val.id,obj.item.id)
						if(val.id==obj.item.id){
							this.chooseActs.splice(index,1)
							return
						}
					})
				}
				console.error("选择的活动",this.chooseActs)
			},
			// 点击确定
			sureConnect(){
				// let chooseActs=this.activityData.filter((item)=>item.chooseStatus && !item.isRelationTeam)
				if(this.chooseActs.length==0){
					uni.showToast({
						title:'请先选择要关联的活动',
						icon:'none'
					})
					return
				}
				let actIds=[]
				this.chooseActs.forEach((item)=>{
					actIds.push(item.id)
				})
				let param={
					teamId:this.groupId,
					teamActivityIds:actIds,
					isCharge:this.noFree=='0'?false:true
				}
				connectAct(param).then((res)=>{
					if(res.code==100000){
						uni.showToast({
							title:'关联成功',
							icon:'none'
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},2000)
					}
				})
			},
			// 创建活动
			toAdd(){
				uni.navigateTo({
					url:'/pages/send/activity/activity'
				})
			}
		},
		onPullDownRefresh() {
			this.initPage()
			this.getList()
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1000)
		},
		onReachBottom() {
			if(this.page<this.pageTotal){
				++this.page
				this.getList()
			}else{
				uni.showToast({
					title:'我也是有底线的',
					icon:'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.myActivity{
	padding:0 0 200rpx;
	box-sizing: border-box;
}
.actTab{
	::v-deep .tabChange{
		padding: 0 200rpx;
		box-sizing: border-box;
	}
}
.activityList{
	flex-wrap: wrap;
	padding: 30rpx;
	box-sizing: border-box;
	&>view{
		flex: 0 0 48%;
	}
	.actOne{
		margin-bottom: 30rpx;
		border-radius:8rpx;
	}
}
.actFixedBtn{
	color: #333;
	position: fixed;
	bottom: 30rpx;
	left: 0;
	right: 0;
	margin: 0 auto;
	padding:0 50rpx;
	box-sizing: border-box;
	text-align: center;
	.btns{
		margin-top: 20rpx;
	}
	.noWidthBtn{
		width: 240rpx;
		height: 80rpx;
		line-height: 80rpx;
		padding: 0;
	}
}
</style>
